var arr = [];
var cartArr = [];
//页面加载完毕 执行
window.onload = function() {
	console.log("onload");
	//本地有数据，就取他，dataObj
	if (localStorage.dataObj) {

		arr = JSON.parse(localStorage.dataObj);
		console.log("arr:", arr);
		//渲染商品列表数据到页面
		showGoodsList(arr);

		//渲染购物车列表数据到页面
		render(getData());
	}

	function showGoodsList(arr) {
		var list_ul = document.querySelector(".list_ul");
		list_ul.innerHTML = "";

		for (var i = 0; i < arr.length; i++) {
			list_ul.innerHTML +=
				`
					<li data-id="${ arr[i].goodsid }">
						<img src="${ arr[i].image }" >
						<div class="good_title mt5">
							${ arr[i].name }
						</div>
						<div class="price mt5">
							${ arr[i].price }元
						</div>
						<button type="button" class="btn_add mt5" onclick='addCart("${ arr[i].goodsid }","${ arr[i].image }","${ arr[i].name }","${ arr[i].price }")'>
							加入购物车
						</button>
					</li>`;
		}
	}
}

//添加购物车并渲染到页面
function addCart(goodsId, img, goodsName, price) {
	var count = 1;
	var xiaoji = Number(price) * Number(count);
	var obj = {
		id: goodsId,
		src: img,
		title: goodsName,
		price: price,
		count: count,
		xiaoji: xiaoji.toFixed(2),
		time: new Date().toLocaleTimeString().slice(2)
	}
	addData(obj);
	render(getData());
}

//添加数据到购物车
function addData(obj) {

	carArr = getData();

	var result = carArr.some(function(item, index) {
		return item.id === obj.id;
	})
	console.log("result:", result);
	if (result) {
		console.log("has");
		jia(obj.id);
		return;
	}
	console.log("no");
	carArr.push(obj);

	localStorage.cartArr = JSON.stringify(cartArr);
}

//公共的获取数据的方法
function getData() {
	cartArr = localStorage.cartArr ? JSON.parse(localStorage.cartArr) : [];
	return cartArr;
}

//渲染购物车到页面
function render(cartArr) {
	console.log("cartArr", cartArr);
	var tbody = document.querySelector('tbody');
	tbody.innerHTML = "";
	var str = "";
	var sum = 0;

	for (var i = 0; i < cartArr.length; i++) {
		str +=
			`<tr>
					<td>
						<input type="checkbox" name="" id="" value=""  class="danxuan" data-id="${ cartArr[i].id }"/>
					</td>
					<td>
						<p>
							<img src="${ cartArr[i].src }" >
							<br>
							<span>${ cartArr[i].title }</span>
						</p>
					</td>
					<td>
						<button type="button" class="btn" onclick="jian(${ cartArr[i].id })">-</button>
						<input disabled type="number" name="" id="" value="${ cartArr[i].count }" class="count"/>
						<button type="button" class="btn" onclick="jia(${ cartArr[i].id })">+</button>
					</td>
					<td>
						<span>${ cartArr[i].price }元</span>
					</td>
					<td>
						${ cartArr[i].xiaoji }
					</td>
					<td>
						<button type="button" onclick="del(${ cartArr[i].id })">删除</button>
					</td>
					<td>
						${ cartArr[i].time }
					</td>
					
				</tr>`;
		//总价格的计算
		sum = sum / 1 + cartArr[i].xiaoji / 1;
	}
	tbody.innerHTML = str;
	document.getElementById("sum").innerHTML = sum;
}


//点击+ ，把商品数量加1，把小计 计算一下
function jia(id) {
	console.log("id", id);
	carArr = getData();
	carArr.forEach(function(item, index) {
		if (item.id == id) {
			item.count++;
			item.xiaoji = (item.count * item.price).toFixed(2);
		}
	})
	localStorage.cartArr = JSON.stringify(cartArr);
	render(getData());
}

//点击减，响应操作，数量和小计发生变化
function jian(id) {
	carArr = getData();
	carArr.forEach(function(item, index) {
		if (item.id == id) {
			if (item.count > 1) {
				item.count--;
				item.xiaoji = (item.count * item.price).toFixed(2);
			}
		}
	})
	localStorage.cartArr = JSON.stringify(cartArr);
	render(getData());
}

//删除商品
function del(id) {
	delData(id);
	render(getData());
}

function delData(id) {
	cartArr = getData();
	cartArr = cartArr.filter(function(item, index) {
		return item.id != id
	})

	localStorage.cartArr = JSON.stringify(cartArr);
}

//全选功能
var quanxuan = document.querySelector(".quanxuan");
quanxuan.onclick = function() {
	var danxuan = document.querySelectorAll(".danxuan");
	for (var i = 0; i < danxuan.length; i++) {
		danxuan[i].checked = quanxuan.checked;
	}
}

//删除选中商品
var delChecked = document.getElementById("delChecked");
delChecked.onclick = function() {
	cartArr = getData();

	var danxuan = document.querySelectorAll(".danxuan:checked");
	for (var i = 0; i < danxuan.length; i++) {
		cartArr.forEach(function(item, index) {
			if (item.id === danxuan[i].getAttribute("data-id")) {
				cartArr.splice(index, 1);
			}
		})
	}
	localStorage.cartArr = JSON.stringify(cartArr);
	render(getData());
}
